<template>
  <div class="app-container-flex">
    <NewFullScreen
      v-model="showDialog"
      title="机构信息"
      @returnBack="returnBack"
    >
      <template v-slot:full-button>
        <el-button
          v-if="$permission('orgInfo:update') && showBtn"
          @click="openUpdate"
          >修改</el-button
        >
      </template>
      <div class="model-panel">
        <div class="model-panel-title">
          <p>机构信息</p>
        </div>
        <div class="model-panel-body">
          <basic-information :info="orgInfo" :label-width="labelWidth">
            <template v-slot:basic-province>
              <address-info :data="orgAddress"></address-info>
            </template>
          </basic-information>
        </div>
      </div>
      <div class="model-panel">
        <div class="model-panel-title">
          <p>营业执照</p>
        </div>
        <div class="model-panel-body">
          <basic-information
            :info="certificateOfBusinessInfo"
            :label-width="labelWidth"
          >
            <template v-slot:basic-licenseFilePath>
              <ele-gallery
                v-if="certificateOfBusinessInfo.data.licenseFilePath"
                :lazy="true"
                :remove-fn="handleRemove"
                :size="150"
                :source="certificateOfBusinessInfo.data.licenseFilePaths"
                title="营业执照"
              />
              <span v-else>-</span>
            </template>
          </basic-information>
        </div>
      </div>
      <div class="model-panel">
        <div class="model-panel-title">
          <p>经营许可证</p>
        </div>
        <div class="model-panel-body">
          <basic-information
            :info="businessLicenseInfo"
            :label-width="labelWidth"
          >
            <template v-slot:basic-licenseFilePath>
              <ele-gallery
                v-if="businessLicenseInfo.data.licenseFilePath"
                :lazy="true"
                :remove-fn="handleRemove"
                :size="150"
                :source="businessLicenseInfo.data.licenseFilePaths"
                title="经营许可证"
              />
              <span v-else>-</span>
            </template>
          </basic-information>
        </div>
      </div>
      <div class="model-panel">
        <div class="model-panel-title">
          <p>税务许可证</p>
        </div>
        <div class="model-panel-body">
          <basic-information :info="taxPermit">
            <template v-slot:basic-licenseFilePath :labelWidth="labelWidth">
              <ele-gallery
                v-if="taxPermit.data.licenseFilePath"
                :lazy="true"
                :remove-fn="handleRemove"
                :size="150"
                :source="taxPermit.data.licenseFilePaths"
                title="税务许可证"
              />
              <span v-else>-</span>
            </template>
          </basic-information>
        </div>
      </div>
      <div class="model-panel">
        <div class="model-panel-title">
          <p>第二医疗器械经营备案证</p>
        </div>
        <div class="model-panel-body">
          <basic-information :info="businessRecordCertificate">
            <template v-slot:basic-licenseFilePath :labelWidth="labelWidth">
              <ele-gallery
                v-if="businessRecordCertificate.data.licenseFilePath"
                :lazy="true"
                :remove-fn="handleRemove"
                :size="150"
                :source="businessRecordCertificate.data.licenseFilePaths"
                title="第二医疗器械经营备案证"
              />
              <span v-else>-</span>
            </template>
          </basic-information>
        </div>
      </div>
    </NewFullScreen>
    <modify-org-info
      v-if="showUpdate"
      v-model:visible="showUpdate"
      title="修改机构信息"
      :data="orgId"
      :type="type"
      @callback="callbackModify"
    ></modify-org-info>
  </div>
</template>

<script setup name="orgDetails">
import BasicInformation from '@/components/BasicInformation/index'
import AddressInfo from '@/components/AddressInfo/index'
import { getOrgInformation } from '@/api/core'
import ModifyOrgInfo from './modify'
import EleGallery from '@/components/UploadImg/eleGallery'
const emits = defineEmits()
const { proxy } = getCurrentInstance()
const props = defineProps({
  visible: {
    type: Boolean,
    default: true,
  },
  id: {
    type: [Number, String],
  },
})
const orgInfo = ref({
  data: {},
  fieldList: [
    { label: '机构名称', value: 'name' },
    { label: '地址', value: 'province', type: 'slot' },
    { label: '详细地址', value: 'address' },
    { label: '联系电话', value: 'phone' },
  ],
})
const certificateOfBusinessInfo = ref({
  data: {},
  fieldList: [
    { label: '证书编号', value: 'certificateNumber' },
    { label: '注册地址', value: 'registeredAddress' },
    { label: '公司类型', value: 'companyTypeValue' },
    {
      label: '注册资本',
      value: 'registeredCapital',
      formatter: proxy.$fn.TripartiteMethod,
    },
    { label: '成立时间', value: 'establishedDate' },
    { label: '经营范围', value: 'businessScope' },
    { label: '发证机关', value: 'issuingAuthority' },
    { label: '发证日期', value: 'issuingDate' },
    { label: '营业开始日期', value: 'startDate' },
    { label: '营业截止日期', value: 'endDate' },
    { label: '营业执照', value: 'licenseFilePath', type: 'slot' },
  ],
})
const businessLicenseInfo = ref({
  data: {},
  fieldList: [
    { label: '证书编号', value: 'certificateNumber' },
    { label: '企业名称', value: 'companyName' },
    { label: '注册地址', value: 'registeredAddress' },
    { label: '法定代表人', value: 'legalRepresentative' },
    { label: '企业负责人', value: 'responsiblePersons' },
    { label: '质量管理人', value: 'qualityManager' },
    { label: '经营范围', value: 'businessScope' },
    { label: '发证机关', value: 'issuingAuthority' },
    { label: '发证日期', value: 'issuingDate' },
    { label: '许可期限开始日期', value: 'startDate' },
    { label: '许可期限截止日期', value: 'endDate' },
    { label: '经营许可证', value: 'licenseFilePath', type: 'slot' },
  ],
})
const taxPermit = ref({
  data: {},
  fieldList: [
    { label: '证书编号', value: 'certificateNumber' },
    { label: '法定代表人', value: 'legalRepresentative' },
    { label: '地址', value: 'registeredAddress' },
    { label: '登记注册类型', value: 'registerTypeValue' },
    { label: '经营范围', value: 'businessScope' },
    { label: '批准设立机关', value: 'approvingAuthority' },
    { label: '发证机关', value: 'issuingAuthority' },
    { label: '发证日期', value: 'issuingDate' },
    { label: '税务登记证', value: 'licenseFilePath', type: 'slot' },
  ],
})
const businessRecordCertificate = ref({
  data: {},
  fieldList: [
    { label: '备案编号', value: 'recordNumber' },
    { label: '备案日期', value: 'recordDate' },
    { label: '企业名称', value: 'businessName' },
    { label: '住所', value: 'registeredAddress' },
    { label: '经营场所', value: 'businessAddress' },
    { label: '库房地址', value: 'warehouseAddress' },
    { label: '经营方式', value: 'businessType' },
    { label: '法定代表人', value: 'legalRepresentative' },
    { label: '企业负责人', value: 'responsiblePersons' },
    { label: '经营范围', value: 'businessScope' },
    { label: '备注', value: 'remark' },
    { label: '证书附件', value: 'licenseFilePath', type: 'slot' },
  ],
})
const labelWidth = ref('140px')
const type = ref('update')
const orgAddress = ref([])
const showUpdate = ref(false)
const orgId = ref(props.id)
const needReturn = ref(false)
const showBtn = ref(true)
const showDialog = computed({
  get() {
    return props.visible
  },
  set(val) {
    // 更新父组件visible
    emits('update:visible', val)
  },
})
watch(
  () => props.visible,
  (val) => {
    showDialog.value = val
  }
)
const computedValues = ref([])
watch(
  () => computedValues.value,
  (value) => {
    if (value.value) {
      if (typeof value.value === 'string') {
        return [value.value]
      } else {
        return [...value.value]
      }
    } else {
      return []
    }
  }
)

function returnBack() {
  emits('returnBack', false)
}
function getData() {
  getOrgInformation(props.id).then((res) => {
    if (res) {
      orgInfo.value.data = res.data.org || {}
      let { province, city, county } = orgInfo.value.data
      if (province) {
        orgAddress.value.push(province)
      }
      if (city) {
        orgAddress.value.push(city)
      }
      if (county) {
        orgAddress.value.push(county)
      }
      certificateOfBusinessInfo.value.data = res.data.businessLicense || {}
      businessLicenseInfo.value.data = res.data.businessPermit || {}
      taxPermit.value.data = res.data.taxPermit || {}
      businessRecordCertificate.value.data =
        res.data.businessRecordCertificate || {}
    }
  })
}
function openUpdate() {
  showUpdate.value = true
}
function callbackModify(data) {
  if (data) {
    getData()
  }
}
const multiple = ref(null)
function handleRemove(index) {
  if (multiple.value) {
    const data = [...computedValues.value]
    data.splice(index, 1)
    emits('input', data || [])
  } else {
    emits('input', null)
  }
}

onMounted(() => {
  getData()
})
</script>

<style scoped></style>
